<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Visualizador de mapas</title>
	<meta name="description" content="Demo visualizador de mapas">
	<meta name="author" content="Daniel Eduardo Amills">

	<meta name="viewport" content="width=device-width,initial-scale=1">

	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/mapstyle.css">
	<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.0.custom.min.css">
	<script src="js/libs/modernizr-2.0.6.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
	<script src="js/libs/jquery.tmpl.js" type="text/javascript"></script>
	<script src="js/libs/jquery-ui-1.10.0.custom.min.js"></script>
	<script src="js/libs/openlayers/OpenLayers.js" type="text/javascript"></script>
	<script src="js/libs/mapquery/jquery.mapquery.core.js" type="text/javascript"></script>
	<script src="js/libs/mapquery/jquery.mapquery.mqZoomSlider.js" type="text/javascript"></script>
	<script src="js/libs/mapquery/jquery.mapquery.mqLayerControl.js" type="text/javascript"></script>
    <script>
	jQuery(document).ready(function() {
		var map = $('#map').mapQuery({
			maxExtent:[2177433.912030, 5825048.712500, 2906182.837970, 6476102.787500],
			projection:'EPSG:4326',
			layers:[{
			    type:'wms',
		        format: 'image/png; mode=24bit',
			    transparent: true,
			    url:'http://debian.aconcaguasf.com.ar/cgi-bin/corpr', 
			    layers:['corpr_base'], label:'Mendoza'
			},
			{
			    type:'wms',
		        format: 'image/png; mode=24bit',
			    transparent: true,
			    url:'http://debian.aconcaguasf.com.ar/cgi-bin/corpr', 
			    layers:['corpr_red_vial'], label:'Calles'
			}
			]
			
		});
		
	    $('#zoomslider').mqZoomSlider({
	        map:'#map'
	    });
	    $('#layercontrol').mqLayerControl({
	    	   map: '#map'
    	});
	    
		var mq = map.data('mapQuery');
		
		$(".layers").click(function() {
				if($( '#searchbox' ).is(':visible')){
					$( '#searchbox' ).toggle();
				}			
				if(!$( '#layerbox' ).is(':visible')){
					//$('article').css('width', '70%');
					$('article').addClass('map-update-size');
					mq.updateSize()
				} 
				$( "#layerbox" ).toggle( 'drop', {}, 500, function(){
					if($( '#layerbox' ).is(':visible')){
						//$('article').css('width', '70%');
						$('article').addClass('map-update-size');
						mq.updateSize();
					} else {
						$('article').removeClass('map-update-size');
						$('article').addClass('map-update-size-99');
						//$('article').css('width', '99%');
						mq.updateSize()
					}			
				} );

		});
		$(".find").click(function() {
			if($( '#layerbox' ).is(':visible')){
				$( '#layerbox' ).toggle();
			}
			if(!$( '#searchbox' ).is(':visible')){
				//$('article').css('width', '70%');
				$('article').addClass('map-update-size');
				mq.updateSize()
			} 
			$( "#searchbox" ).toggle( 'drop', {}, 500, function(){
				if($( '#searchbox' ).is(':visible')){
					//$('article').css('width', '70%');
					$('article').addClass('map-update-size');
					mq.updateSize();
				} else {
					$('article').removeClass('map-update-size');
					$('article').addClass('map-update-size-99');
					//$('article').css('width', '99%');
					mq.updateSize()
				}			
			} );

	});		


	});
    </script>
</head>

<body>
	<div id="header-container">
		<header class="wrapper clearfix">
			<h1 id="title">Visualizador de mapas</h1>
			<nav>
				<ul>
					<li><a href="#" class="layers">Capas</a></li>
					<li><a href="#" class="find">Buscador</a></li>
				</ul>
			</nav>
		</header>
	</div>
	<div id="main-container">
		<div id="main" class="clearfix">
			<aside id="layerbox">
				<h3>Capas</h3>
				<p id="layercontrol">  </p>
			</aside>
			<aside id="searchbox" style="display: none;">
				<h3>Buscador</h3>
				<p id="searchcontrol"> <input type="text" id="search-query" name="search-query" placeholder="Ingrese texto"> </p>
			</aside>			
			<article>
				<div id="map" class="map">
					<div id="zoomslider" class="mq-widget"></div>
				</div>
			</article>
			
		</div> <!-- #main -->
	</div> <!-- #main-container -->
</body>
</html>
